import React from 'react';
import Layout from '../components/Layout';
import Banner from '../components/Banner';
import Image from 'next/image';

const AboutPage = () => {
  return (
    <Layout title="关于我们 - 凡科星悦" description="了解凡科星悦的公司背景、企业文化及发展历程">
      <Banner 
        title="关于我们" 
        subtitle="凡科星悦致力于为企业提供智能化解决方案，助力企业数字化转型" 
        backgroundImage="/images/about-banner.jpg"
      />

      {/* 公司简介 */}
      <section className="py-16 bg-white">
        <div className="container mx-auto px-4">
          <div className="flex flex-col md:flex-row items-center">
            <div className="md:w-1/2 mb-8 md:mb-0 md:pr-12">
              <h2 className="text-3xl font-bold text-gray-800 mb-6">公司简介</h2>
              <p className="text-gray-600 mb-4 leading-relaxed">
                凡科星悦成立于2015年，是一家专注于提供智能化解决方案的创新科技公司。我们的使命是通过
                技术创新为企业创造价值，帮助客户在数字化转型过程中获得竞争优势。
              </p>
              <p className="text-gray-600 mb-4 leading-relaxed">
                我们拥有一支经验丰富、充满激情的团队，专注于人工智能、大数据分析和物联网技术的研发与应用。
                通过持续创新和优质服务，我们已成功为各行各业的客户提供了定制化的解决方案。
              </p>
              <p className="text-gray-600 leading-relaxed">
                凡科星悦总部位于北京，在上海、深圳和成都设有分支机构，服务网络覆盖全国主要城市。
              </p>
            </div>
            <div className="md:w-1/2">
              <div className="relative h-80 md:h-96 rounded-lg overflow-hidden shadow-xl">
                <Image 
                  src="/images/company-office.jpg" 
                  alt="凡科星悦办公环境" 
                  layout="fill" 
                  objectFit="cover" 
                  className="rounded-lg"
                />
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* 企业文化 */}
      <section className="py-16 bg-gray-50">
        <div className="container mx-auto px-4">
          <div className="text-center max-w-3xl mx-auto mb-12">
            <h2 className="text-3xl font-bold text-gray-800 mb-4">企业文化</h2>
            <p className="text-gray-600">我们的价值观塑造了我们的企业文化，指导着我们的日常决策和行动</p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            <div className="bg-white p-8 rounded-lg shadow-md hover:shadow-lg transition-shadow">
              <div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-6 mx-auto">
                <svg className="w-8 h-8 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
                </svg>
              </div>
              <h3 className="text-xl font-semibold text-center mb-3">创新驱动</h3>
              <p className="text-gray-600 text-center">
                我们鼓励创新思维和勇于尝试的精神，持续探索新技术和解决方案，为客户创造更多价值。
              </p>
            </div>
            
            <div className="bg-white p-8 rounded-lg shadow-md hover:shadow-lg transition-shadow">
              <div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-6 mx-auto">
                <svg className="w-8 h-8 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
                </svg>
              </div>
              <h3 className="text-xl font-semibold text-center mb-3">客户至上</h3>
              <p className="text-gray-600 text-center">
                我们始终将客户需求放在首位，提供高质量的产品和服务，与客户建立长期互利的合作关系。
              </p>
            </div>
            
            <div className="bg-white p-8 rounded-lg shadow-md hover:shadow-lg transition-shadow">
              <div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-6 mx-auto">
                <svg className="w-8 h-8 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
              </div>
              <h3 className="text-xl font-semibold text-center mb-3">诚信负责</h3>
              <p className="text-gray-600 text-center">
                我们恪守诚信原则，对客户、合作伙伴和员工诚实守信，勇于承担责任，积极解决问题。
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* 发展历程 */}
      <section className="py-16 bg-white">
        <div className="container mx-auto px-4">
          <h2 className="text-3xl font-bold text-gray-800 mb-10 text-center">发展历程</h2>
          
          <div className="relative">
            {/* 中心线 */}
            <div className="absolute left-1/2 transform -translate-x-1/2 h-full w-1 bg-blue-100"></div>
            
            <div className="space-y-12">
              <div className="flex flex-col md:flex-row items-center">
                <div className="md:w-1/2 md:pr-12 md:text-right order-2 md:order-1">
                  <h3 className="text-xl font-bold text-gray-800 mb-2">2015年</h3>
                  <p className="text-gray-600">凡科星悦在北京成立，专注于软件解决方案开发</p>
                </div>
                <div className="md:w-12 flex justify-center my-4 md:my-0 order-1 md:order-2 relative z-10">
                  <div className="w-10 h-10 bg-blue-500 rounded-full"></div>
                </div>
                <div className="md:w-1/2 md:pl-12 order-3"></div>
              </div>
              
              <div className="flex flex-col md:flex-row items-center">
                <div className="md:w-1/2 md:pr-12 order-2 md:order-1"></div>
                <div className="md:w-12 flex justify-center my-4 md:my-0 order-1 md:order-2 relative z-10">
                  <div className="w-10 h-10 bg-blue-500 rounded-full"></div>
                </div>
                <div className="md:w-1/2 md:pl-12 order-3 md:text-left">
                  <h3 className="text-xl font-bold text-gray-800 mb-2">2017年</h3>
                  <p className="text-gray-600">扩展业务领域，开始提供人工智能和大数据分析服务</p>
                </div>
              </div>
              
              <div className="flex flex-col md:flex-row items-center">
                <div className="md:w-1/2 md:pr-12 md:text-right order-2 md:order-1">
                  <h3 className="text-xl font-bold text-gray-800 mb-2">2019年</h3>
                  <p className="text-gray-600">在上海和深圳设立分公司，业务覆盖范围扩大到全国</p>
                </div>
                <div className="md:w-12 flex justify-center my-4 md:my-0 order-1 md:order-2 relative z-10">
                  <div className="w-10 h-10 bg-blue-500 rounded-full"></div>
                </div>
                <div className="md:w-1/2 md:pl-12 order-3"></div>
              </div>
              
              <div className="flex flex-col md:flex-row items-center">
                <div className="md:w-1/2 md:pr-12 order-2 md:order-1"></div>
                <div className="md:w-12 flex justify-center my-4 md:my-0 order-1 md:order-2 relative z-10">
                  <div className="w-10 h-10 bg-blue-500 rounded-full"></div>
                </div>
                <div className="md:w-1/2 md:pl-12 order-3 md:text-left">
                  <h3 className="text-xl font-bold text-gray-800 mb-2">2021年</h3>
                  <p className="text-gray-600">推出物联网产品线，开始为制造业客户提供智能化解决方案</p>
                </div>
              </div>
              
              <div className="flex flex-col md:flex-row items-center">
                <div className="md:w-1/2 md:pr-12 md:text-right order-2 md:order-1">
                  <h3 className="text-xl font-bold text-gray-800 mb-2">2023年</h3>
                  <p className="text-gray-600">完成B轮融资，进一步扩大研发团队，加强产品创新</p>
                </div>
                <div className="md:w-12 flex justify-center my-4 md:my-0 order-1 md:order-2 relative z-10">
                  <div className="w-10 h-10 bg-blue-500 rounded-full"></div>
                </div>
                <div className="md:w-1/2 md:pl-12 order-3"></div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* 管理团队 */}
      <section className="py-16 bg-gray-50">
        <div className="container mx-auto px-4">
          <h2 className="text-3xl font-bold text-gray-800 mb-10 text-center">管理团队</h2>
          
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            <div className="bg-white rounded-lg overflow-hidden shadow-md hover:shadow-lg transition-shadow">
              <div className="relative h-72">
                <Image 
                  src="/images/team-ceo.jpg" 
                  alt="CEO 张明" 
                  layout="fill" 
                  objectFit="cover" 
                />
              </div>
              <div className="p-6">
                <h3 className="text-xl font-bold text-gray-800 mb-1">张明</h3>
                <p className="text-blue-600 font-medium mb-3">创始人兼首席执行官</p>
                <p className="text-gray-600">
                  拥有15年互联网和科技行业经验，曾在多家知名科技公司担任高管职位。
                </p>
              </div>
            </div>
            
            <div className="bg-white rounded-lg overflow-hidden shadow-md hover:shadow-lg transition-shadow">
              <div className="relative h-72">
                <Image 
                  src="/images/team-cto.jpg" 
                  alt="CTO 李晓华" 
                  layout="fill" 
                  objectFit="cover" 
                />
              </div>
              <div className="p-6">
                <h3 className="text-xl font-bold text-gray-800 mb-1">李晓华</h3>
                <p className="text-blue-600 font-medium mb-3">首席技术官</p>
                <p className="text-gray-600">
                  人工智能和大数据领域专家，带领团队开发了多个创新技术产品。
                </p>
              </div>
            </div>
            
            <div className="bg-white rounded-lg overflow-hidden shadow-md hover:shadow-lg transition-shadow">
              <div className="relative h-72">
                <Image 
                  src="/images/team-coo.jpg" 
                  alt="COO 王芳" 
                  layout="fill" 
                  objectFit="cover" 
                />
              </div>
              <div className="p-6">
                <h3 className="text-xl font-bold text-gray-800 mb-1">王芳</h3>
                <p className="text-blue-600 font-medium mb-3">首席运营官</p>
                <p className="text-gray-600">
                  擅长业务战略制定和团队管理，负责公司日常运营和业务拓展。
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>
    </Layout>
  );
};

export default AboutPage; 